<template>
  <div id="app">
    <keep-alive>
    <router-view></router-view>
	</keep-alive>
	<div id="nave">
	    <ul >
		   <li>
		       <a v-on:touchstart="fare()">
			      <span :class="{'nave_fare_item':isA ,'ft_active':isB1}" ></span>
			       <p :class="{'f_red':isB1,'nave_p':isA}">购票</p>
		       </a>
		   </li>
		   <li>
		      <a v-on:touchstart="riding()">
			      <span :class="{'nave_riding_item':isA,'ft_active':isB2}"></span>
			      <p :class="{'f_red':isB2,'nave_p':isA}">乘车</p>  
			  </a>
		 </li>
		   <li>
		      <a v-on:touchstart="mine()">
			      <span :class="{'nave_mine_item':isA,'ft_active':isB3}"></span>
			      <p :class="{'f_red':isB3,'nave_p':isA}">我的</p>
			  </a>
		  </li>
		</ul>
	</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
     return{
	      isA:true,
		  isB1:true,
		  isB2:false,
		  isB3:false,
	 }
  },
  methods:{
     fare(){
	       this.$router.push({
		       path:"/"
		   }) ;
		   this.isB1 =true;
		   this.isB2 = false;
		   this.isB3 = false;
	 },
	 riding(){
	       this.$router.push({
		       path:"/Riding"
		   }) ;
		   this.isB1 =false;
		   this.isB2 = true;
		   this.isB3 = false;
	 },
	  mine(){
	       this.$router.push({
		       path:"/Mine"
		   }) ;
		   this.isB1 =false;
		   this.isB2 = false;
		   this.isB3 = true;
	 },
	 
  }
  
}
</script>

<style>
*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}
   #nave{
      width:100%;
	  height:10vh;
	  background:#ffffff;
	  position:fixed;bottom:0;
   }
   #nave a{text-decoration:none;}
    
   #nave li{float:left;
        width:33.3%;
		height:10vh;
		display:flex;
		justify-content:center;
		align-items:center;	
		color:#9e9da3;
   }
.nave_fare_item{
        background:url(./assets/22-52-20.png) no-repeat;
		display: block;
        width: 24px;
        height: 25px;
        background-size: 89px 51.5px;
       margin: auto;
}
  .nave_p{color:#9e9da3;}
 .nave_riding_item{
       background:url(./assets/22-52-20.png) no-repeat;
		display: block;
        width: 24px;
        height: 25px;
        background-size: 89px 51.5px;
       margin: auto;
	   background-position-x: -33px;
 }
 .nave_mine_item{
     background:url(./assets/22-52-20.png) no-repeat;
		display: block;
        width: 24px;
        height: 25px;
        background-size: 89px 51.5px;
		    background-position-x: -66px;
       margin: auto;
 }
.ft_active {
    background-position-y: -28px;
} 
.f_red {
    color: #ff4a39;
}
</style>
